<template>
  <div class="withdraw-page">
    <Header />

    <!-- 提现内容区域 -->
    <div class="withdraw-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">账户提现</h2>
        <p class="page-subtitle">将您的账户余额提现到银行卡</p>
      </div>
      <div class="container">
        <div class="withdraw-wrapper">
          <div class="withdraw-main">
            <!-- 左侧提现表单 -->
            <div class="withdraw-form-section">
              <div class="form-card">
                <!-- 当前余额 -->
                <div class="balance-info">
                  <div class="balance-label">可提现余额</div>
                  <div class="balance-amount">¥{{ balance || '0.00' }}</div>
                  <div class="balance-tip">提现金额不能超过可用余额</div>
                </div>

                <!-- 提现金额输入 -->
                <div class="amount-section">
                  <h3 class="section-title">提现金额</h3>
                  <el-form ref="withdrawFormRef" :model="withdrawForm" :rules="withdrawRules">
                    <el-form-item prop="amount">
                      <el-input v-model="withdrawForm.amount" placeholder="请输入提现金额" size="large" prefix-icon="Money" clearable>
                        <template #prepend>¥</template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                  <div class="amount-tips">
                    <span class="tip-item">• 单次提现金额：¥{{ minAmount }} - ¥50,000</span>
                    <span class="tip-item">• 提现手续费：{{ withdrawFee }}%</span>
                    <span class="tip-item">• 实际到账金额：¥{{ actualAmount }}</span>
                  </div>
                </div>

                <!-- 提现方式选择 -->
                <div class="withdraw-method-section">
                  <h3 class="section-title">选择提现方式</h3>
                  <div class="withdraw-methods">
                    <!-- 微信提现 -->
                    <div class="method-item" :class="{ active: selectedMethod === 1 }" @click="selectMethod(1)">
                      <div class="method-icon">
                        <el-icon size="32" color="#07c160">
                          <ChatDotRound />
                        </el-icon>
                      </div>
                      <div class="method-info">
                        <div class="method-name">微信钱包</div>
                        <div class="method-desc">提现到微信零钱，实时到账， 仅限微信客户端使用</div>
                      </div>
                      <div class="method-radio">
                        <el-radio v-model="selectedMethod" :value="1"></el-radio>
                      </div>
                    </div>

                    <!-- 支付宝提现 -->
                    <div class="method-item" :class="{ active: selectedMethod === 2 }" @click="selectMethod(2)">
                      <div class="method-icon">
                        <el-icon size="32" color="#1677ff">
                          <Wallet />
                        </el-icon>
                      </div>
                      <div class="method-info">
                        <div class="method-name">支付宝</div>
                        <div class="method-desc">提现到支付宝余额，实时到账</div>
                      </div>
                      <div class="method-radio">
                        <el-radio v-model="selectedMethod" :value="2"></el-radio>
                      </div>
                    </div>

                    <!-- 银行卡提现 -->
                    <!-- <div class="method-item" :class="{ active: selectedMethod === 3 }" @click="selectMethod(3)">
                      <div class="method-icon">
                        <el-icon size="32" color="#f56c6c">
                          <CreditCard />
                        </el-icon>
                      </div>
                      <div class="method-info">
                        <div class="method-name">银行卡</div>
                        <div class="method-desc">提现到银行卡，工作日当天到账</div>
                      </div>
                      <div class="method-radio">
                        <el-radio v-model="selectedMethod" :value="3"></el-radio>
                      </div>
                    </div> -->
                  </div>
                </div>

                <!-- 账户信息输入 -->
                <div v-if="selectedMethod" class="account-section">
                  <h3 class="section-title">{{ getAccountTitle() }}</h3>

                  <!-- 微信账户 -->
                  <div v-if="selectedMethod === 1" class="account-input">
                    <el-form-item prop="realname">
                      <el-input v-model="withdrawForm.realname" placeholder="请输入真实姓名" size="large" prefix-icon="User" clearable />
                    </el-form-item>
                    <el-form-item prop="account">
                      <el-input v-model="withdrawForm.account" placeholder="请输入微信账号" size="large" prefix-icon="User" clearable />
                    </el-form-item>
                    <div class="account-tip">请确保微信号与实名信息一致</div>
                  </div>

                  <!-- 支付宝账户 -->
                  <div v-if="selectedMethod === 2" class="account-input">
                    <el-form-item prop="realname">
                      <el-input v-model="withdrawForm.realname" placeholder="请输入真实姓名" size="large" prefix-icon="User" clearable />
                    </el-form-item>
                    <el-form-item prop="account">
                      <el-input v-model="withdrawForm.account" placeholder="请输入支付宝账号" size="large" prefix-icon="User" clearable />
                    </el-form-item>
                    <div class="account-tip">请确保支付宝账号与实名信息一致</div>
                  </div>

                  <!-- 银行卡选择 -->
                  <div v-if="selectedMethod === 3" class="bank-cards">
                    <div
                      v-for="card in bankCards"
                      :key="card.id"
                      class="bank-card-item"
                      :class="{ active: selectedCard === card.id }"
                      @click="selectBankCard(card.id)">
                      <div class="card-icon">
                        <el-icon size="32" color="#409eff">
                          <CreditCard />
                        </el-icon>
                      </div>
                      <div class="card-info">
                        <div class="bank-name">{{ card.bankName }}</div>
                        <div class="card-number">**** **** **** {{ card.cardNumber.slice(-4) }}</div>
                      </div>
                      <div class="card-radio">
                        <el-radio :value="selectedCard" :label="card.id"></el-radio>
                      </div>
                    </div>
                    <div class="add-card-btn" @click="addBankCard">
                      <span class="add-icon">+</span>
                      添加银行卡
                    </div>
                  </div>
                </div>

                <!-- 提现密码 -->
                <div class="password-section">
                  <h3 class="section-title">支付密码</h3>
                  <el-form-item prop="password">
                    <el-input
                      v-model="withdrawForm.password"
                      type="password"
                      placeholder="请输入支付密码"
                      size="large"
                      prefix-icon="Lock"
                      show-password
                      maxlength="6"
                      clearable />
                  </el-form-item>
                </div>

                <!-- 提现按钮 -->
                <div class="submit-section">
                  <el-button type="primary" size="large" class="withdraw-btn" :loading="loading" :disabled="!canWithdraw" @click="handleWithdraw">
                    {{ loading ? '处理中...' : `确认提现 ¥${withdrawForm.amount || '0.00'}` }}
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 右侧信息展示 -->
            <div class="info-section">
              <!-- 提现说明 -->
              <div class="info-card">
                <h3 class="card-title">提现说明</h3>
                <div class="info-list">
                  <div class="info-item">
                    <span class="info-icon">⏰</span>
                    <span class="info-text">工作日提现，当日到账</span>
                  </div>
                  <div class="info-item">
                    <span class="info-icon">💳</span>
                    <span class="info-text">仅支持本人实名银行卡</span>
                  </div>
                  <div class="info-item">
                    <span class="info-icon">🔒</span>
                    <span class="info-text">提现过程安全加密保护</span>
                  </div>
                  <div class="info-item">
                    <span class="info-icon">📞</span>
                    <span class="info-text">如有问题请联系客服</span>
                  </div>
                </div>
              </div>

              <!-- 提现记录 -->
              <div class="info-card">
                <h3 class="card-title">最近提现记录</h3>
                <div class="record-list">
                  <div v-if="withdrawRecords.length === 0" class="no-records">暂无提现记录</div>
                  <div v-for="record in withdrawRecords" :key="record.id" class="record-item">
                    <div class="record-info">
                      <div class="record-amount">- ¥{{ record.change_amount }}</div>
                      <div class="record-time">{{ record.event_time }}</div>
                      <div class="record-account">{{ record.event_data }}</div>
                    </div>
                    <div
                      class="record-status"
                      :class="{ success: record.sync_status === 1, pending: record.sync_status === 0, fail: record.sync_status === 2 }">
                      {{ getStatusText(record.sync_status) }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 提现规则 -->
              <div class="info-card rules-card">
                <h3 class="card-title">提现规则</h3>
                <div class="rules-content">
                  <div class="rule-item">
                    <div class="rule-title">提现时间</div>
                    <div class="rule-desc">工作日9:00-17:00，节假日顺延</div>
                  </div>
                  <div class="rule-item">
                    <div class="rule-title">到账时间</div>
                    <div class="rule-desc">工作日当天到账，非工作日次日到账</div>
                  </div>
                  <div class="rule-item">
                    <div class="rule-title">手续费用</div>
                    <div class="rule-desc">每笔收取{{ withdrawFee }}%手续费</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, reactive, computed, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ChatDotRound, Wallet, CreditCard } from '@element-plus/icons-vue'
  import Header from '@/components/Header.vue'
  import Footer from '@/components/Footer.vue'
  import { useUserStore } from '@/stores/user.js'
  import apiUser from '@/api/modules/user'

  const router = useRouter()
  const userStore = useUserStore()
  const withdrawFormRef = ref()
  const loading = ref(false)
  const { proxy } = getCurrentInstance()

  // 从store获取用户信息
  const userInfo = computed(() => userStore.userInfo)
  const balance = ref(0)

  // 提现最小额度
  const minAmount = ref(0.01)

  // 提现手续费
  const withdrawFee = 0.1

  // 选中的提现方式和银行卡
  const selectedMethod = ref(null)
  const selectedCard = ref(null)

  // 表单数据
  const withdrawForm = reactive({
    amount: '',
    password: '',
    account: '',
    realname: '',
  })

  // 银行卡列表（模拟数据）
  const bankCards = ref([
    {
      id: 1,
      bankName: '中国工商银行',
      cardNumber: '6222021234567890',
    },
    {
      id: 2,
      bankName: '中国建设银行',
      cardNumber: '6227001234567890',
    },
    {
      id: 3,
      bankName: '中国农业银行',
      cardNumber: '6228481234567890',
    },
  ])

  // 提现记录（模拟数据）
  const withdrawRecords = ref([])

  // 表单验证规则
  const withdrawRules = {
    amount: [
      { required: true, message: '请输入提现金额', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          const amount = parseFloat(value)

          if (isNaN(amount)) {
            callback(new Error('请输入有效的金额'))
          } else if (amount < minAmount.value) {
            callback(new Error('提现金额不能少于' + minAmount.value + '元'))
          } else if (amount > 50000) {
            callback(new Error('提现金额不能超过50000元'))
          } else if (amount > balance.value) {
            callback(new Error('提现金额不能超过可用余额'))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
    password: [
      { required: true, message: '请输入支付密码', trigger: 'blur' },
      { min: 6, max: 6, message: '支付密码为6位数字', trigger: 'blur' },
    ],
    account: [{ required: true, message: '请输入提现平台的登录账号', trigger: 'blur' }],
    realname: [{ min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }],
  }

  // 实际到账金额
  const actualAmount = computed(() => {
    const amount = parseFloat(withdrawForm.amount || 0)
    if (amount > 0) {
      return Math.max(0, amount - (amount * withdrawFee) / 100).toFixed(2)
    }
    return '0.00'
  })

  // 手续费用
  const serviceFee = computed(() => {
    const amount = parseFloat(withdrawForm.amount || 0)
    if (amount > 0) {
      return Math.max(0, (amount * withdrawFee) / 100).toFixed(2)
    }
    return '0.00'
  })

  // 是否可以提现
  const canWithdraw = computed(() => {
    const hasAmount = withdrawForm.amount && parseFloat(withdrawForm.amount) >= minAmount.value
    const hasPassword = withdrawForm.password
    const hasMethod = selectedMethod.value

    // 判断是否在微信内
    const isWeixin = /MicroMessenger/i.test(navigator.userAgent)
    if (!isWeixin && selectedMethod.value === 1) {
      return false
    }

    let hasAccount = false
    let hasRealName = withdrawForm.realname.trim()
    if (selectedMethod.value === 1) {
      hasAccount = withdrawForm.account.trim()
    } else if (selectedMethod.value === 2) {
      hasAccount = withdrawForm.account.trim()
    } else if (selectedMethod.value === 3) {
      hasAccount = selectedCard.value
    }

    return hasAmount && hasPassword && hasMethod && hasAccount && hasRealName
  })

  // 选择提现方式
  const selectMethod = (method) => {
    selectedMethod.value = method
    // 切换方式时清空相关表单
    if (method !== 1) withdrawForm.account = ''
    if (method !== 2) withdrawForm.account = ''
    if (method !== 3) selectedCard.value = null
  }

  // 选择银行卡
  const selectBankCard = (cardId) => {
    selectedCard.value = cardId
  }

  // 获取账户标题
  const getAccountTitle = () => {
    const titleMap = {
      1: '微信账户信息',
      2: '支付宝账户信息',
      3: '选择银行卡',
    }
    return titleMap[selectedMethod.value] || '账户信息'
  }

  // 添加银行卡
  const addBankCard = () => {
    ElMessage.info('添加银行卡功能开发中...')
  }

  // 获取状态文本
  const getStatusText = (status) => {
    const statusMap = {
      1: '成功',
      0: '处理中',
      2: '失败',
    }
    return statusMap[status] || '未知'
  }

  // 处理提现
  const handleWithdraw = async () => {
    if (!withdrawFormRef.value) return

    try {
      const valid = await withdrawFormRef.value.validate()
      if (!valid) return

      // 是否设置了支付密码
      if (userInfo.value.has_password_secure !== '已设置') {
        ElMessage.warning('您尚未设置支付密码，请先设置')
        return
      }

      let accountInfo = ''
      let withdrawData = {
        open_user_id: '',
        alipay_account: withdrawForm.account,
        alipay_realname: withdrawForm.realname,
        withdraw_to: selectedMethod.value,
        withdraw_amount: withdrawForm.amount,
        service_rate: withdrawFee,
        service_fee: serviceFee.value,
        actual_amount: actualAmount.value,
        remark: '',
      }

      // 根据提现方式获取账户信息
      if (selectedMethod.value === 1) {
        accountInfo = `微信钱包(${withdrawForm.account})`
      } else if (selectedMethod.value === 2) {
        accountInfo = `支付宝(${withdrawForm.account})`
      } else if (selectedMethod.value === 3) {
        const selectedBankCard = bankCards.value.find((card) => card.id === selectedCard.value)
        if (!selectedBankCard) {
          ElMessage.warning('请选择银行卡')
          return
        }
        accountInfo = `${selectedBankCard.bankName}(${selectedBankCard.cardNumber.slice(-4)})`
        withdrawData.alipay_account = selectedBankCard
      }

      // 确认提现
      const confirmResult = await ElMessageBox.confirm(
        `确认提现 ¥${withdrawForm.amount} 到 ${accountInfo} 吗？\n手续费：${withdrawFee}%\n实际到账：¥${actualAmount.value}`,
        '确认提现',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )

      if (confirmResult !== 'confirm') return

      loading.value = true

      // 模拟提现API调用
      apiUser.AddWithdrawOrders(withdrawData).then((res) => {
        processWithdraw(res.data)
      })
    } catch (error) {
      if (error !== 'cancel') {
        console.error('提现失败:', error)
        ElMessage.error('提现失败，请稍后重试')
      }
    } finally {
      loading.value = false
    }
  }

  // 处理提现流程
  const processWithdraw = (orderid) => {
    loading.value = true
    const daveData = {
      openid: '',
      account: withdrawForm.account,
      realname: withdrawForm.realname,
      id: orderid,
      paymentPassword: proxy.$encryptAES(withdrawForm.password), // 支付密码(加密)
    }
    apiUser
      .PayWithdrawOrders(daveData)
      .then((res) => {
        loading.value = false
        ElMessage.success(res.msg)
        if (res.code === 100) {
          // 重置表单
          withdrawForm.amount = ''
          withdrawForm.password = ''
          withdrawForm.account = ''
          selectedMethod.value = null
          selectedCard.value = null

          // 可以跳转到提现记录页面
          setTimeout(() => {
            router.push('/balance')
          }, 1500)
        } else if (selectedMethod.value === 1 && res.package_info && res.package_info !== '') {
          // 微信需要用户点击确认收款
          // 在微信客户端通过小程序或H5拉起页面请求用户确认收款
          const package_info = res.package_info
          wx.config({
            // 参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
          })
          wx.ready(() => {
            wx.checkJsApi({
              jsApiList: ['requestMerchantTransfer'],
              success: (res2) => {
                if (res2.checkResult['requestMerchantTransfer']) {
                  WeixinJSBridge.invoke(
                    'requestMerchantTransfer',
                    {
                      mchId: '1722049876',
                      appId: 'wx765a8ceea732c72b',
                      package: package_info,
                    },
                    (res3) => {
                      if (res3.err_msg === 'requestMerchantTransfer:ok') {
                        // res3.err_msg将在页面展示成功后返回应用时返回success，并不代表付款成功
                        // 重置表单
                        withdrawForm.amount = ''
                        withdrawForm.password = ''
                        withdrawForm.account = ''
                        selectedMethod.value = null
                        selectedCard.value = null

                        // 可以跳转到提现记录页面
                        setTimeout(() => {
                          router.push('/balance')
                        }, 1500)
                      }
                    }
                  )
                } else {
                  alert('你的微信版本过低，请更新至最新版本。')
                }
              },
            })
          })
        }
      })
      .catch((err) => {
        loading.value = false
      })
  }

  // 分页加载数据
  const fetchData = async () => {
    // 事件类型：1-收入 2-支出 3-充值 4-提现 5-转账(转出) 6-转账(转入)
    apiUser
      .GetBalanceList({
        page: 1,
        limit: 3,
        event_type: 4,
      })
      .then(async (res) => {
        withdrawRecords.value = res.data
      })
  }

  // 查询账户信息
  const loadAccountInfo = () => {
    apiUser.GetAccountInfo().then((res) => {
      if (res.data && res.data.balance) {
        balance.value = res.data.balance
      }
    })
  }

  // 组件挂载时初始化
  onMounted(() => {
    loadAccountInfo()
    fetchData()
  })
</script>

<style scoped>
  .withdraw-page {
    min-height: 100vh;
    background: #f8f9fa;
  }

  .withdraw-content {
    padding: 40px 0 80px;
    min-height: calc(100vh - 200px);
  }

  .container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
  }

  .withdraw-wrapper {
    margin: 0 auto;
  }

  /* 页面标题 */
  .page-header {
    background: linear-gradient(135deg, #52a58a 0%, #459a7e 100%);
    padding: 60px 0;
    color: white;
    text-align: center;
  }

  .page-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 15px 0;
  }

  .page-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
  }

  /* 主要内容区域 */
  .withdraw-main {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
  }

  /* 左侧表单区域 */
  .withdraw-form-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
  }

  .form-card {
    padding: 30px;
  }

  /* 余额信息 */
  .balance-info {
    background: linear-gradient(135deg, #1c705e 0%, #2d8a6e 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
  }

  .balance-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
  }

  .balance-amount {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .balance-tip {
    font-size: 12px;
    opacity: 0.8;
  }

  /* 金额输入区域 */
  .amount-section {
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }

  .amount-tips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
  }

  .tip-item {
    font-size: 12px;
    color: #999;
  }

  /* 提现方式选择区域 */
  .withdraw-method-section {
    margin-bottom: 30px;
  }

  .withdraw-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .method-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .method-item:hover {
    border-color: #ff6b35;
    background: #fff7f0;
  }

  .method-item.active {
    border-color: #ff6b35;
    background: #fff7f0;
  }

  .method-icon {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .method-info {
    flex: 1;
  }

  .method-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .method-desc {
    font-size: 14px;
    color: #666;
  }

  /* 账户信息区域 */
  .account-section {
    margin-bottom: 30px;
  }

  .account-input {
    margin-bottom: 16px;
  }

  .account-tip {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
  }

  .bank-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .bank-card-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .bank-card-item:hover {
    border-color: #ff6b35;
    background: #fff7f0;
  }

  .bank-card-item.active {
    border-color: #ff6b35;
    background: #fff7f0;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-info {
    flex: 1;
  }

  .bank-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .card-number {
    font-size: 14px;
    color: #666;
  }

  .add-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s;
  }

  .add-card-btn:hover {
    border-color: #ff6b35;
    color: #ff6b35;
  }

  .add-icon {
    font-size: 20px;
    font-weight: bold;
  }

  /* 密码区域 */
  .password-section {
    margin-bottom: 30px;
  }

  /* 提交按钮 */
  .submit-section {
    margin-top: 30px;
  }

  .withdraw-btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    background: #ff6b35;
    border-color: #ff6b35;
  }

  .withdraw-btn:hover {
    background: #f7931e;
    border-color: #f7931e;
  }

  .withdraw-btn:disabled {
    background: #ccc;
    border-color: #ccc;
  }

  /* 右侧信息区域 */
  .info-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
  }

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }

  /* 提现说明 */
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .info-icon {
    font-size: 20px;
    flex-shrink: 0;
  }

  .info-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }

  /* 提现记录 */
  .record-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .no-records {
    text-align: center;
    color: #999;
    padding: 20px;
    font-size: 14px;
  }

  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .record-item:last-child {
    border-bottom: none;
  }

  .record-amount {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b35;
  }

  .record-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }

  .record-account {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
  }

  .record-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
  }

  .record-status.success {
    background: #e8f5e8;
    color: #4caf50;
  }

  .record-status.pending {
    background: #fff3cd;
    color: #856404;
  }

  .record-status.failed {
    background: #f8d7da;
    color: #721c24;
  }

  /* 提现规则 */
  .rules-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 1px solid #b3d9ff;
  }

  .rules-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .rule-item {
    padding: 12px;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #1890ff;
  }

  .rule-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .rule-desc {
    font-size: 12px;
    color: #666;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .withdraw-main {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .info-section {
      order: -1;
    }

    .page-title {
      font-size: 24px;
    }

    .form-card {
      padding: 20px;
    }

    .bank-cards {
      gap: 8px;
    }

    .bank-card-item {
      padding: 12px;
    }
  }

  @media (max-width: 480px) {
    .container {
      padding: 0 15px;
    }

    .withdraw-content {
      padding: 20px 0 60px;
    }

    .info-card {
      padding: 16px;
    }
  }
</style>
